<template>
  <div class="home-main w">
    <div class="top" :class="pcOrWx?'topPhone':''">
      <ul>
        <router-link :to="{name:'ProductDisplay',params:{id:'3-1'}}" tag="li">
          <Row type="flex" justify="center" class-name="item">
            <i-col class-name="left" :xs="24" :md="8">
            </i-col>
            <i-col class-name="right" :xs="24" :md="16">
              <p class="title">手术部智能管理系统</p>
              <p class="subTitle">Intelligent surgical management system</p>
            </i-col>
          </Row>
        </router-link>
        <router-link :to="{name:'ProductDisplay',params: {id:'3-2'}}" tag="li">
          <Row type="flex" justify="center" class-name="item">
            <i-col class-name="left" :xs="24" :md="8">
            </i-col>
            <i-col class-name="right" :xs="24" :md="16">
              <p class="title">物品管理追溯系统</p>
              <p class="subTitle">Item management traceability system</p>
            </i-col>
          </Row>
        </router-link>
        <router-link :to="{name:'ProductDisplay',params: {id:'3-3'}}" tag="li">
          <Row type="flex" justify="center" class-name="item">
            <i-col class-name="left" :xs="24" :md="12"></i-col>
            <i-col class-name="right" :xs="24" :md="12">
              <p class="title">数字化手术室</p>
              <p class="subTitle">Digital operating room <span style="color:transparent;" v-if="pcOrWx">占位</span></p>
            </i-col>
          </Row>
        </router-link>
      </ul>
    </div>
    <div class="middle">
      <Row type="flex" justify="space-around" align="middle">
        <i-col class-name="about-us" :xs="24" :md="11">
          <Row>
            <i-col>
              <p class="titlePhone" v-if="pcOrWx">公司简介</p>
              <div class="title" v-else="pcOrWx">
                <img src="../assets/home/icon_aboutkanghu.png" alt="">
                关于康护
              </div>
            </i-col>
            <i-col>
              <Row :gutter="20" class-name="content" type="flex" justify="center" align="middle">
                <i-col :xs="24" :md="12">
                  <img src="../assets/home/main_left_pic.png" alt="">
                </i-col>
                <i-col :xs="24" :md="12">
                  <p>
                    武汉康护医疗科技有限公司(原：武汉雷软科技有限公司)成立于2012年4月，坐落在武汉光谷。公司由多名医疗净化行业的专业人士共同成立。是一家专业从事医院空间智慧护理系统、节能系统、手术室数字化系统等智能医疗领域研发的企业，也是中国首个提出手术一键护理管理的企业。</p>
                </i-col>
              </Row>
            </i-col>
            <i-col :xs="{span:0}" :md="24">
              <router-link :to="{name:'AboutUs',params:{id:'2-1'}}" tag="div" class="more tc">
                更多
              </router-link>
            </i-col>
          </Row>
        </i-col>
        <i-col :xs="{span:0}" :md="1">
          <div class="line"></div>
        </i-col>
        <i-col class-name="partners" :xs="24" :md="12">
          <Row>
            <i-col>
              <p class="titlePhone" v-if="pcOrWx">合作客户</p>
              <div class="title" v-else="pcOrWx">
                <img src="../assets/home/icon_kehu.png" alt="">
                合作客户
              </div>
            </i-col>
            <i-col>
              <ul class="content">
                <li><img src="../assets/home/main_right_pic_one.png" alt="">湖北省人民医院</li>
                <li><img src="../assets/home/main_right_pic_two.png" alt="">重庆江津区中医院</li>
                <li><img src="../assets/home/main_right_pic_three.png" alt="">中国人民解放军总医院301</li>
                <li><img src="../assets/home/main_right_pic_four.png" alt="">武汉大学中南医院</li>
                <li><img src="../assets/home/main_right_pic_five.png" alt="">武汉市东西湖区人民医院</li>
                <li><img src="../assets/home/main_right_pic_six.png" alt="">三峡大学仁和医院</li>
              </ul>
            </i-col>
            <i-col :xs="{span:0}" :md="24">
              <router-link :to="{name:'AboutUs',params:{id:'2-1'}}" tag="div" class="more tc">
                更多
              </router-link>
            </i-col>
          </Row>
        </i-col>
      </Row>
    </div>
    <div class="bottom">
      <Row type="flex" justify="space-around" align="middle">
        <i-col :xs="8" :md="8">
          <router-link :to="{name:'AboutUs',params: {id:'2-1'}}" tag="ul">
            <li>关于康护</li>
            <li class="sub">公司简介</li>
            <li class="sub">公司文化</li>
            <li class="sub">公司资质</li>
          </router-link>
        </i-col>
        <i-col :xs="8" :md="8">
          <ul>
            <router-link :to="{name: 'ProductDisplay', params: {id: '3-1'}}" tag="li">产品展示</router-link>
            <router-link :to="{name:'ProductDisplay',params: {id:'3-1'}}" tag="li" class="sub">手术部智能管理系统
            </router-link>
            <router-link :to="{name:'ProductDisplay',params: {id:'3-2'}}" tag="li" class="sub">物品管理追溯系统
            </router-link>
            <router-link :to="{name:'ProductDisplay',params: {id:'3-3'}}" tag="li" class="sub">数字化手术室</router-link>
          </ul>
        </i-col>
        <i-col :xs="8" :md="8">
          <ul>
            <router-link :to="{name:'ContactUs',params: {id:'5-1'}}" tag="li">联系我们</router-link>
            <router-link :to="{name:'ContactUs',params: {id:'5-1'}}" tag="li" class="sub">联系方式</router-link>
            <router-link :to="{name:'ContactUs',params: {id:'5-2'}}" tag="li" class="sub">招聘信息</router-link>
            <router-link :to="{name:'ContactUs',params: {id:'5-3'}}" tag="li" class="sub">在线留言</router-link>
          </ul>
        </i-col>
        <!--<i-col :xs="12" :md="6">-->
          <!--<ul class="last">-->
            <!--<li class="sub qrcode"><img src="../assets/home/footer_qrcode.png" alt="">扫二维码 了解更多</li>-->
          <!--</ul>-->
        <!--</i-col>-->
      </Row>


    </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from "vuex";

  export default {
    name: "home-main",
    computed: {
      ...mapState({
        pcOrWx: (state) => state.config.PC_OR_WX,
      })
    },
  }
</script>

<style scoped lang="less">
  .home-main {
    height: 100%;
    .top {
      height: 88px;
      box-sizing: border-box;
      background-color: #fff;
      ul {
        display: flex;
        padding: 0 10px;
        justify-content: center;
        li {
          display: flex;
          height: 88px;
          border-bottom: 1px solid #ccc;
          justify-content: center;
          align-items: center;
          width: calc(100% / 3);
          cursor: pointer;
          .item {
            width: 100%;
          }
          .left {
            width: 34px;
            height: 38px;
          }
          .right {
            text-align: center;
            /*padding-left: 20px;*/
            .title {
              font-size: 20px;
            }
            .subTitle {
              font-size: 12px;
              color: #999;
            }
          }
        }
        li:nth-of-type(1) {
          .left {
            background: url("../assets/home/icon_surgical_hover.png") no-repeat center/100% 100%;
          }
        }
        li:nth-of-type(2) {
          .left {
            background: url("../assets/home/icon_ltem_hover.png") no-repeat center/100% 100%;
          }
        }
        li:nth-of-type(3) {
          .left {
            background: url("../assets/home/icon_room_hover.png") no-repeat center/100% 100%;
          }
        }
        li:hover {
          background-color: #4bb2df;
          .right {
            .title {
              color: #fff;
            }
            .subTitle {
              color: #fff;
            }
          }
        }
        li:nth-of-type(1):hover {
          .left {
            background: url("../assets/home/icon_surgical_click.png") no-repeat center/100% 100%;

          }
        }
        li:nth-of-type(2):hover {
          .left {
            background: url("../assets/home/icon_ltem_click.png") no-repeat center/100% 100%;
          }
        }
        li:nth-of-type(3):hover {
          .left {
            background: url("../assets/home/icon_room_click.png") no-repeat center/100% 100%;
          }
        }
      }
    }
    .topPhone {
      ul {
        li {
          .left {
            width: 17px;
            height: 19px;
          }
          .right {
            .title {
              font-size: 12px;
            }
            .subTitle {
              font-size: 10px;
            }
          }
        }
      }
    }

    .middle {
      background-color: #fff;
      box-sizing: border-box;
      .title {
        padding-left: 8%;
        img {
          vertical-align: middle;
        }
        p {
          line-height: 24px;
        }
      }
      .titlePhone {
        font-size: 18px;
        color: #4bb2df;
        text-align: center;
        padding-bottom: 10px;
      }
      .more {
        color: #999;
        width: 60px;
        height: 20px;
        line-height: 20px;
        border-radius: 4px;
        border: 1px solid #ccc;
        margin: 0 auto;
        cursor: pointer;
      }
      .more:hover,.more:active{
        border: 1px solid #4bb2df;
        background-color: #4bb2df;
        color:#fff;
      }
      .about-us {
        min-height: 336px;
        padding: 28px 2.5% 14px 2.5%;
        .content {
          min-height: 250px;
          p {
            margin-top: 14px;
          }
          img {
            width: 200px;
            display: block;
            margin: 0 auto;
          }
        }
      }
      .line {
        width: 1px;
        height: 250px;
        background-color: #ccc;
        margin: 0 auto;
      }
      .partners {
        min-height: 336px;
        padding: 28px 2.5% 14px 2.5%;
        .content {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          min-height: 250px;
          li {
            width: calc(100% / 3);
            text-align: center;
            font-size: 12px;
            img {
              display: block;
              margin: 0 auto;
              padding-bottom: 8px;
            }
          }
        }
      }
    }
    .bottom {
      width: 100%;
      margin-top: 10px;
      padding-bottom: 20px;
      background-color: #fff;
      ul {
        margin-top: 30px;
        li {
          text-align: center;
          cursor: pointer;
          img {
            display: block;
            margin: 0 auto;
          }
        }
        li.sub {
          font-size: 12px;
          line-height: 20px;
        }
        li.sub:hover{
          color:#4bb2df;
        }
        /*li.qrcode {*/
          /*text-align: center;*/
        /*}*/
      }
      /*ul.last {*/
        /*margin-top: 26px;*/
      /*}*/
    }

  }
</style>
